<!-- 挑战 （旧版，未启用）-->
<template>
  <div class="challenge">
    <!-- 头部 -->
    <div class="header clearfix">
      <div class="icon-back left" @click="goBack"></div><div class="total-bar right"><span class="number"><em>{{getCurNumber}}</em>/{{issueList.length}}</span><span class="progress-total-bar" ref="progress-total"><span class="progress-cur-bar" ref="progress-cur"></span></span></div>
    </div>
    <!-- 内容 -->
    <transition name="page">

      <div class="content" v-if="item.isShow" v-for="(item,index) in issueList" :key="item.id">
        <!-- 问题框 -->
        <div class="title-box">
          <div class="text-img-issue" v-if="item.imgeUrl && item.question">
            <span class="issue">{{item.question}}</span>
            <div class="img-box">
              <img :src="item.imgeUrl" alt="">
            </div>
          </div>
          <div class="img-issue" v-else-if="item.imgeUrl && !item.question">
            <img :src="item.imgeUrl" alt="">
          </div>
          <div class="text-issue" v-else>
            {{item.question}}
          </div>
        </div>
        <!-- 选项 -->
        <div class="options" v-if="item.options && item.options.length > 0">
          <li class="option" v-for="(option,inx) in item.options" :key="inx" @click.once="ClickOption(item.options,option,item.rightAnswer,inx,index,issueList)" ref="option">
            <i class="icon-sign " :class="'icon-'+ (inx+1)" ref="icon-sign"></i><span class="text">{{option}}</span>
          </li>
        </div>
      </div>
      
    </transition>
    <!-- 提示弹窗 -->
    <Popup v-show="popupShow" :popupShow="popupShow" :popupType="1" :popupText="popupText"  @popupClose="popupClose"></Popup>
    
  </div>
</template>

<script>
  import { axGet, axPost } from '@/api/index'
  import Popup from '@/components/Popup'

  export default {
    name: 'challenge',
    components:{
        Popup,
    },
    data() {
      // 26个英文字母
      let letter = []
      for(let i = 0;i < 25;i++){
        letter.push(String.fromCharCode(65 + i))
      }
      return {
        userId:this.$parent.myInfo.UserId,                                // 用户id  
        bookId:this.$route.query.bookid,                                  // 书本编号  
        optionsSign: letter,                                              // 英文字母
        isShow: true,                                                                                 
        issueList: [],                                                    // 问题列表
        bookInfo: {},                                                     // 书本信息
        rightCount: 0,                                                    // 答对数量
        isFirst: true,                                                   // 正确按钮限制
        rightIndex: 0,                                                    // 正确的索引
        //弹窗
        popupShow:false,
        popupText:'<p>挑战完成！</p><p>还可以试试别的挑战哦</p>',
      }
    },
    mounted() {
      this.$parent.menuShow=false;

      /****** 验证登录 *****/ 
      if(!sessionStorage.getItem("myInfo")){
          this.$router.replace({path:'/',query: {}});
      }else{
          this.getInit()
          this.getUserInfo()
          setTimeout(() => {
            this.progressStatus()
          }, 50)
      }
    },
    destroyed(){
        touchTrue()
    },
    computed: {
      handlerIssueList() {
        return this.issueList.filter(({isShow}) => isShow)
      },
      getCurNumber() {
        let num = 0
        this.issueList.forEach((item,inxdex) => {
          if(item.isShow) {
            num = inxdex + 1
          }
        })
        return num
      }
    },
    methods: {
      getInit() {
        let param = {
          BookId: this.bookId
        }
        // 获取题目信息
        axGet('GetBookQuestionList', param).then(res => {
          console.log(res)
          if(res.ResultCode === 1) {
            this.bookInfo = res.Value
            this.issueList = res.Value.list
            let options = []
            this.issueList.forEach((item,index) => {
              options = item.answer.split('_split_')
              this.$set(item,'options',options.sort(this.randomSort))
              this.$set(item,'isShow', false)
              if(index == 0) {
                this.$set(item,'isShow', true)
              }
            })
          }
        })
      },
      // 排序规则
      randomSort() {
        return Math.random() > 0.5 ? -1 : 1
      },      
      // 获取用户信息
      getUserInfo() {
        let param = {
          userId: this.userId,
          activityid: 6,
          wherefrom: 2,
        }
        axGet('GetUserUseInfo', param).then(res => {
          console.log(res)
        })
      },
      // 进度条状态
      progressStatus() {
        if(this.$refs['progress-total'] && this.$refs['progress-cur']) {
          this.$refs['progress-cur'].style.transitionDuration = '.5s'
          this.$refs['progress-cur'].style.webkitTransitionDuration = '.5s'
          this.$refs['progress-cur'].style.width =  this.getCurNumber / this.issueList.length * 100 + '%'
          console.log(this.getCurNumber / this.issueList.length)
        }
      },
      /**
       * @param {list} options 所有的选项
       * @param {string} select 选中的答案字符
       * @param {string} rightAnswer 正确答案
       * @param {number} inx 当前问题选中的选项索引
       * @param {number} issueIndex 当前问题的索引
       */
ClickOption: function (options,select, rightAnswer,inx,issueIndex,list) {
        if(this.isFirst) {
          this.isFirst = false
          options.forEach((item,indx) => {
            if(item == rightAnswer) {
              this.$refs['option'].forEach((domItem,index) => { // 改变选中的背景
                if(inx == index) {
                  if(indx == index) { // 选中的为正确选项
                    domItem.className = 'option true'
                  }else { // 选中的不为正确选项
                    domItem.className = 'option false'
                  }
                }
                if(indx == index) { // 选中错误选项，显示正确选项
                  domItem.className = 'option true'
                }
              })
              this.$refs['icon-sign'].forEach((item,index) => { // 改变选中的图标
                if(inx == index) {
                  if(indx == index) {
                    item.className = 'icon-sign icon-true'
                  }else {
                    item.className = 'icon-sign icon-false'
                  }
                }
                if(indx == index) {
                  item.className = 'icon-sign icon-true'
                }
              })
            }
          })
          if(select == rightAnswer) {
            this.rightCount++ // +1
          }
          setTimeout(() => { // 选择后几秒离开
            
            list.forEach((item,index,arr) => {
              if(issueIndex === index && index != arr.length -1) { // 最后一个停留
                item.isShow = false
              }
              if(index - 1 === issueIndex) { // 切换题目
                item.isShow = true
              }
              
            })
            if(issueIndex + 1 != list.length){ // 不是最后一个问题
              this.$nextTick(() => {
                this.$refs['option'].forEach((item,index) => { // 背景
                  item.style.border = 'none'
                  item.className = 'option'
                })
                this.$refs['icon-sign'].forEach((item,index) => { // 图标
                  item.className = 'icon-sign' +' icon-'+(index+1)
                })
              })
              this.$forceUpdate(); // 强制更新
              this.isFirst = true  // 初始化
              this.progressStatus() // 更新进度条
            }else { // 最后一个问题结束提交
                let param = {
                  BookId: this.bookId,
                  UserId: this.userId,
                  AnswerQuestionCount: list.length,
                  RightCount: this.rightCount
                }
                axPost('PostBookQuestionAnswerLog', param).then(res => {
                  if(res.ResultCode === 1) {
                    console.log(res)
                  }
                })
              }
          },1000)
        }
        console.log(issueIndex)
        
        
      },
      // 返回
      goBack() {
        this.$router.go(-1)
      },
      // 弹窗
      popupClose(){
          this.popupShow=false;
          this.$router.go(-1)
      },
      
    }
  }
</script>

<style scoped>
.challenge {
  padding: .3rem .32rem .22rem;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  background-image: url('~@/assets/img/challenge/bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}

/* 头部 */
.header {
  margin-bottom: .26rem;
}
.icon-back {
  width: .8rem;
  height: .88rem;
  background-image: url('~@/assets/img/challenge/icon_back.png');
  background-repeat: no-repeat;
  background-size: contain;
}
.total-bar {
  width: 5.83rem;
  height: .88rem;
  background-image: url('~@/assets/img/challenge/bg_progress.png');
  background-repeat: no-repeat;
  background-size: contain;
}
.total-bar .number {
  margin-left: .64rem;
  margin-right: .3rem;
  line-height: .78rem;
  font-size: .44rem;
  font-weight: bold;
  color: #cdd5dd;
}
.total-bar .number em {
  color: #8d9db1;
}
.total-bar .progress-total-bar {
  position: relative;
  margin-top: -.2rem;
  display: inline-block;
  vertical-align: middle;
  width: 3.8rem;
  height: .3rem;
  /* line-height: .88rem; */
  background: #d9dfe5;
  border-radius: .2rem
}
.total-bar .progress-cur-bar {
  position: absolute;
  display: inline-block;
  width: 0%;
  height: .3rem;
  background: #85cd0d;
  border-radius: .2rem
}

/* 内容 */
.content {
  padding: .46rem .48rem;
  box-sizing: border-box;
  width: 6.85rem;
  min-height: 10.4rem;
  font-weight: bold;
  background: #ffffff;
  border-radius: .4rem;
  border-bottom-left-radius: .6rem;
  border-bottom-right-radius: .6rem;
  background-image: url('~@/assets/img/challenge/bg_content.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}
.content .title-box {
  margin-bottom: .3rem;
}
.img-issue {
  overflow: hidden;
  width: 100%;
  height: 3.3rem;
  background: #bbcfe5;
  text-align: center;
}
.img-issue img{
  height: 100%;
}
.text-img-issue {
  overflow: hidden;
  width: 100%;
  height: 3.3rem;
  background: #ffe5e5;
}
.text-img-issue .issue {
  display: inline-block;
  margin-bottom: .18rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  font-size: .32rem;
}
.text-img-issue .img-box {
  margin: 0 auto;
  width: 4.8rem;
  height: 2.7rem;
  text-align: center;
}
.text-img-issue .img-box img {
  height: 100%;
}
.text-issue {
  margin: .54rem 0;
  padding-bottom: .3rem;
  width: 100%;
  font-size: .32rem;
}

/* 选项 */
.options{
  width: 100%;
}
.options li.option{
  margin: 0 auto .2rem;
  padding: 0 .3rem;
  width: 5.5rem;
  line-height: 1.2rem;
  box-sizing: border-box;
  border-radius: .2rem;
  background: #f3f5f7;
}
.options li.option .icon-sign{
  display: inline-block;
  margin-right: .3rem;
  width: .6rem;
  height: .6rem;
  line-height: .6rem;
  border-radius: 50%;
  vertical-align: middle;
}
.true {
  color: #00cd86 !important;
  background: #e5faf3 !important;
}
.false {
  color: #ff7100 !important;
  background: #fff1e5 !important;
}
.icon-1 {
  background-image: url('~@/assets/img/challenge/icon_A.png');
}
.icon-2 {
  background-image: url('~@/assets/img/challenge/icon_B.png');
}
.icon-3 {
  background-image: url('~@/assets/img/challenge/icon_C.png');
}
.icon-4 {
  background-image: url('~@/assets/img/challenge/icon_D.png');
}
.icon-false {
  background-image: url('~@/assets/img/challenge/icon_false.png');
}
.icon-true {
  background-image: url('~@/assets/img/challenge/icon_true.png');
}

li.option .text {
  display: inline-block;
  margin: .2rem 0;
  width: calc(100% - 1rem);
  line-height: 1.2em;
  vertical-align: middle;
  font-size: .32rem;
  font-weight: normal;
  /* font-family: '黑体'; */
}
</style>